<template>
	<view class="content" :style="{'background':empty? '#fff':'#F2F1F6'}">
		<view v-if="empty">
		<u-empty src="/static/metting/vote-back.png" icon-size="363" text=" " class="empty" style="top: 40%;"></u-empty>
		<view class="create-button flexcen" @click="create">创建投票</view>
		</view>
		<view v-else class="frame">
			<view class="frame-top">
				<view class="frame-title flexal">
					<image src="/static/metting/voteIcon.png" style="width: 36rpx;height: 32rpx;"></image>
					<u-input style="margin-left: 17rpx;font-weight: 500;font-size: 30rpx;color: #000000;" placeholder="请输入投票主题名称"
					 v-model="value" :type="type" :border="border" />
				</view>
				<view class="desc-text">补充描述（选填）</view>
				<u-input v-model="area.value" style="margin-top: 22rpx;max-height: 120rpx;overflow: auto;" placeholder="请输入投票描述" :type="area.type" :border="area.border" 
				:height="area.height" :auto-height="area.autoHeight" />
			</view>
			<!-- 问题 -->
			<view class="frame-item" v-for="(item,index) in list" :key="index">
				<view class="item-title flexal">
					<u-input style="margin-left: 17rpx;font-weight: 500;font-size: 30rpx;color: #000000;" placeholder="请输入问题名称"
					 v-model="item.name" :type="type" :border="border" />
					 <image src="/static/metting/delete.png" style="width: 31rpx;height: 31rpx;margin: 0rpx 32rpx;" @click="deleteIssue(index)"></image>
				</view>
				<view v-for="(items,indexs) in item.child" :key="indexs">
				<view class="chlid-item flexal">
					<u-input style="margin-left: 17rpx;font-weight: 500;font-size: 50rpx;color: #000000;" placeholder="请输入选项名称"
					 v-model="items.name" :type="type" :border="border" />
					 <image src="/static/metting/sub.png" style="width: 32rpx;height: 32rpx;margin-left: 32rpx;" @click="deleteAnswer(index,indexs)"></image>
				</view>
				<view class="frame-line"></view>
				</view>
				<view class="frame-add" @click="addAnswer(index)">+ 添加选项</view>
			</view>
			<view class="frame-add-question flexcen" @click="addQuestion">
				+ 添加问题
			</view>
			<view class="flexal">
				<u-checkbox @change="checkboxChange" v-model="checked" :name="'cryptonym'" style="color: #000000;margin-top: 36rpx;margin-left: 32rpx;" >匿名投票</u-checkbox>
			</view>
			
			<view style="height: 149rpx;"></view>
			<view  class="frame-buttom flexcen">
				<view class="button flexcen" @click="go('/pages6/metting/startVote')">完成</view>
			</view>
		</view>
		<!-- 电话提示滑动快 -->
		<movablearea1 :movaheight="movaheightAll" v-if="movableareaShow" @editMovaheightAll="editMovaheightAll" :movaTop="movaTopAll"></movablearea1>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				empty:false,
				value: '',
				type: 'text',
				border: false,
				checked:false,			//是否匿名投票
				area:{
					value: '',
					type: 'textarea',
					border: false,
					height: 120,
					autoHeight: true,
				},
				list:[
					{
						name:'问题1',
						child:[
							{
								name:'选项1'
							}
						]
					}
					
				]
			}
		},
		
		methods: {
			// 创建投票
			create(){
				this.empty = false
				uni.setNavigationBarTitle({
					title:'创建投票'
				});
			},
			// 是否匿名
			checkboxChange(e){
				this.checked = e.value
			},
			// 添加选项
			addAnswer(index){
				this.list[index].child.push({name:''})
			},
			// 添加问题
			addQuestion(){
				let params = {
					name:'',
					child:[
						{
							name:''
						}
					],
				}
				this.list.push(params)
			},
			//删除问题
			deleteIssue(index) {
				let list = this.list
				list.splice(index, 1);
				this.list = list
			},
			// 删除选项
			deleteAnswer(index, indexs) {
				let list = this.list
				list[index].child.splice(indexs, 1);
				this.list = list
			},
		}
	}
</script>

<style lang="less">
	
	.content{
		background: #F2F1F6;
	}
	.create-button{
		position: absolute;
		top: 55%;
		left: 137rpx;
		width: 476rpx;
		height: 80rpx;
		background: #0052D9;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		font-weight: normal;
		font-size: 30rpx;
		color: #FFFFFF;
	}
	
	.frame{
		
		
		.frame-top{
			padding: 32rpx 32rpx;
			// padding-bottom: 32rpx;
			// margin-top: 32rpx;
			background: #FFFFFF;
			
			.frame-title{
				width: 686rpx;
				height: 88rpx;
				background: #F5F6F8;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				padding: 0rpx 32rpx;
			}
			.desc-text{
				margin-top: 32rpx;
				font-weight: 500;
				font-size: 24rpx;
				color: #858A99;
			}
		}
		
		.frame-item{
			padding: 40rpx 32rpx;
			margin-top: 16rpx;
			width: 750rpx;
			background: #FFFFFF;
			
			.item-title{
				width: 686rpx;
				height: 88rpx;
				background: #F5F6F8;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
			}
			.chlid-item{
				margin-top: 30rpx;
			}
			.frame-line{
				// position: absolute;
				// margin-top: 10rpx;
				width: 686rpx;
				height: 0rpx;
				border: 1rpx solid #707070;
				opacity: 0.17;
			}
			.frame-add{
				margin-top: 30rpx;
				font-weight: 400;
				font-size: 30rpx;
				color: #366EF4;	
			}
		}
		.frame-add-question{
			margin-top: 16rpx;
			padding: 40rpx 0rpx;
			font-weight: 400;
			font-size: 30rpx;
			color: #366EF4;
			background: #FFFFFF;
		}
		.frame-buttom{
			position: fixed;
			bottom: 0rpx;
			width: 750rpx;
			height: 149rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 8rpx 32rpx 1rpx rgba(9,4,114,0.1);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			.button{
				width: 686rpx;
				height: 80rpx;
				background: #0052D9;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				font-weight: normal;
				font-size: 30rpx;
				color: #FFFFFF;
			}
		}
	}
	
</style>
